<template>
	<div id="histroy">
		<p id="histroy-p1"></p>
		<h3 id="histroy-h3">搜索历史</h3>
		<ul id="histroy-ul">
			<li id="histroy-li" v-for="(histroy,index) in this.$root.hotgoods" :key="index" >
				<router-link to="/LieBiao">
				<a id="histroy-a">{{histroy}}</a>
				</router-link>
				<!-- <span @click="del(index)">X</span> -->
			</li>
		</ul>
		<p id="histroy-p2" @click="qk">清空搜索历史</p>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				histroys:[
					"袜子","地摊","玩具"
				],
				msg: true
			};
		},
		methods:{
			del(index){
				// this.$root.hotgoods.splice(index,1);
				// console.log("hihihi");
			},
			qk(){
				// this.$root.hotgoods.splice(0,this.$root.hotgoods.length);
				// this.msg = false;
			},
		},
	}
</script>

<style scoped>
	#histroy{
		width: 100%;
	}
	#histroy-p1{
		width: 100%;
		height: 0.08rem;
		background-color: #e7e7e7;
	}
	#histroy-h3{
		width: 100%;
		height: 0.3rem;
		color: #333;
		font-size: 14px;
		font-weight: normal;
		text-indent: 0.08rem;
		line-height: 0.3rem;
		border-bottom: 0.01rem solid #ececec;
	}
	#histroy-ul{
		width: 4.04rem;
		margin-left: 0.1rem;
		margin-bottom: 0.15rem;
	}
	#histroy-li{
		width: 100%;
		height: 0.35rem;
		line-height: 0.35rem;
		border-bottom: 0.01rem solid #ececec;
		position: relative;
		z-index: -1;
	}
	#histroy-a{
		text-decoration: none;
		font-size: 0.14rem;
		color: #333;
	}
	span{
		position: absolute;
		right: 0.05rem;
		top: 50%;
		transform: translateY(-50%);
	}
	#histroy-p2{
		width: 1.82rem;
		height: 0.32rem;
		background-color: white;
		border: 1px solid #ececec;
		border-radius: 0.1rem;
		font-size: 0.13rem;
		color: #666666;
		line-height: 0.32rem;
		text-align: center;
		margin: auto;
	}
</style>
